<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            height: 540px;
            width: 960px;
            position: relative;
            margin: 50px auto;
            overflow: hidden;

        }
        .box img{
            top: 0;
            left: 0;
            width: 960px;
            height: 540px;
            position: absolute;
            transition: all .3s;
            opacity: 0;
            z-index: -1;
        }

        ul li{
            list-style: none;
            width: 50px;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        a{
            text-decoration: none;
            color: #35b1ff;
            width: 50px;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        .box ul{
            border-radius: 10px ;
            height: 40px;
            width: 400px;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            left: 30%;
            bottom: 0;
            position: absolute;
            background: white;
            z-index: 9999;
        }
        #pic1{
            transform: translateX(-100%);
        }
        #pic2{
            transform: translateX(-200%);
        }
        #pic3{
            transform: translateX(-300%);
        }
        #pic4{
            transform: translateX(-400%);
        }
        #pic5{
            transform: translateX(-500%);
        }
        #pic6{
            transform: translateX(-600%);
        }
        #pic1:target{
            transform: translateX(0);
            opacity: 1;
        }

        #pic2:target{
            transform: translateX(0);
            opacity: 1;
        }

        #pic3:target{
            transform: translateX(0);
            opacity: 1;
        }
        #pic4:target{
            transform: translateX(0);
            opacity: 1;
        }
        #pic5:target{
            transform: translateX(0);
            opacity: 1;
        }
        #pic6:target{
            transform: translateX(0);
            opacity: 1;
        }
        #pic1:target~ul>li:nth-of-type(1){
            background:greenyellow;
        }
        #pic2:target~ul>li:nth-of-type(2){
            background:greenyellow;
        }
        #pic3:target~ul>li:nth-of-type(3){
            background:greenyellow;
        }
        #pic4:target~ul>li:nth-of-type(4){
            background:greenyellow;
        }
        #pic5:target~ul>li:nth-of-type(5){
            background:greenyellow;
        }
        #pic6:target~ul>li:nth-of-type(6){
            background:greenyellow;
        }
    </style>
</head>
<body>
    <div class="box">
        <img id="pic1" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1226245663,3019982188&fm=26&gp=0.jpg" alt="">
        <img id="pic2" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3344187687,3082678505&fm=26&gp=0.jpg" alt="">
        <img id="pic3" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1226245663,3019982188&fm=26&gp=0.jpg" alt="">
        <img id="pic4" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2083122921,3494566640&fm=26&gp=0.jpg" alt="">
        <img id="pic5" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3081363038,3017821239&fm=26&gp=0.jpg" alt="">
        <img id="pic6" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2083122921,3494566640&fm=26&gp=0.jpg" alt="">
        <ul>
            <li><a href="#pic1">图1</a></li>
            <li><a href="#pic2">图2</a></li>
            <li><a href="#pic3">图3</a></li>
            <li><a href="#pic4">图4</a></li>
            <li><a href="#pic5">图5</a></li>
            <li><a href="#pic6">图6</a></li>

        </ul>
    </div>
</body>
</html>